<template>
  <el-dialog @close="close" v-model="dialogVisible" width="1000px">
    <template #title>
      <span class="el-dialog__title">{{ title }}</span>
    </template>

    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="小组名称" prop="groupName">
        <el-input v-model="ruleForm.groupName" placeholder="请输入小组名称" />
      </el-form-item>
      <el-form-item label="小组编号" prop="groupOrder">
        <el-input v-model="ruleForm.groupOrder" placeholder="请输入小组编号" />
      </el-form-item>
      <el-form-item label="小组人数" prop="groupPeonum">
        <el-input v-model="ruleForm.groupPeonum" disabled />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="ruleForm.status">
          <el-radio
            v-for="dict in dict.type.sys_normal_disable"
            :key="dict.value"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入对本小组的描述" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="success" @click="handleClose(ruleFormRef)"> 确定 </el-button>
        <el-button type="warning" @click="dialogVisible = false"> 取消 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup name="UserGroupDialog">
import { FormInstance } from 'element-plus'
import { getCurrentInstance, reactive, ref } from 'vue'
import { reqGroupAddUrl, reqGroupEditUrl, reqUnAllocatedListUrl, reqUserCroupUrl } from "@/api/gather/group";

const { proxy }: any = getCurrentInstance()
const ruleFormRef = ref<FormInstance>()
const dialogVisible = ref<boolean>(false)
const title = ref('分配小组成员')
let $emit = defineEmits(['getList'])
const rules = reactive({
  groupName: [{ required: true, message: '分组名称不能为空', trigger: 'blur' }, {max: 50, message: '分组名称不能超过50个字符', trigger: 'blur'}],
  groupOrder: [{ required: true, message: '分组编号不能为空', trigger: 'blur' }, {max: 50, message: '分组名称不能超过50个字符', trigger: 'blur'}],
})

/*form表单*/
const ruleForm = reactive({
  groupId: undefined, // 小组id
  userGroups: [], // 该小组成员
})

/*对话框关闭时的调用*/
const close = () => {
  ruleFormRef.value.resetFields() /*表单重置*/
  Object.keys(ruleForm).forEach((key) => {
    if (key === 'status') ruleForm[key] = '0'
    else if (key === 'groupPeonum') ruleForm[key] = 0
    else ruleForm[key] = undefined
  })
}

const show = async (item: any = {}) => {
  ruleForm.groupId = item.groupId;
  /*根据小组ID获取小组成员信息*/
  /*await reqUnAllocatedListUrl(item.groupId).then((req) => {
    if(req.code == 200){

      dialogVisible.value = true
    }else {
      proxy.$modal.msgError(req.message !== null ? req.message : "打开失败，未知错误请联系管理员!")
    }
  }).catch((e) => {})*/
}

const handleClose = async (done: () => void) => {
  await ruleFormRef.value.validate(async (valid: any, fields: any) => {
    if (valid) {
      if (!ruleForm.groupId) {
        await reqGroupAddUrl(ruleForm).then((req: any) => {
          if (req.code === 200) {
            proxy.$modal.msgSuccess('添加成功！')
            dialogVisible.value = false
            $emit('getList')
          } else {
            proxy.$modal.msgError(req.message != null ? req.message : '添加失败！')
            return
          }
        })
      } else {
        await reqGroupEditUrl(ruleForm).then((req: any) => {
          if (req.code === 200) {
            proxy.$modal.msgSuccess('修改成功！')
            dialogVisible.value = false
            $emit('getList')
          } else {
            proxy.$modal.msgError(req.message != null ? req.message : '修改失败！')
            return
          }
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

defineExpose({
  show,
})
</script>

<script lang="ts">
export default {
  dicts: ['sys_normal_disable'],
}
</script>
<style lang="scss" scoped>
@import "../index.scss";

</style>
